// 验证码点击事件
const code = document.querySelector('.code')
let num = 10
let flag = true
code.addEventListener('click', function () {
    if (flag) {
        flag = false
        setTimeout(function () {
            flag = true
        }, 10000)
        code.innerHTML = `请(${num})s后重试`
        const miterId = setInterval(function () {
            num--
            code.innerHTML = `请(${num})s后重试`
            if (num <= 0) {
                clearInterval(miterId)
                code.innerHTML = `重新发送`
                num = 10
            }
        }, 1000)
    }
})

// 2. 验证用户名, 用户名的正则表达式 /^[a-zA-Z0-9-_]{6,10}$/
const uname = document.querySelector('#uname')
function fn1() {
    const regExp = /^[a-zA-Z0-9-_]{6,10}$/
    const msg = uname.nextElementSibling
    if (regExp.test(uname.value)) {
        msg.className = 'msg msgGreen'
        msg.innerHTML = `输入正确`
    } else {
        msg.className = 'msg msgRed'
        msg.innerHTML = `请输入6-10位有效字符`
    }
    return regExp.test(uname.value)
}
uname.addEventListener('change', fn1)
// 3. 验证手机号, 手机号的正则表达式 /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
const cellphone = document.querySelector('#cellphone')
function fn2() {
    const regExp = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
    const msg = cellphone.nextElementSibling
    if (regExp.test(cellphone.value)) {
        msg.className = 'msg msgGreen'
        msg.innerHTML = `输入正确`
    } else {
        msg.className = 'msg msgRed'
        msg.innerHTML = `请输入11位有效数字`
    }
    return regExp.test(cellphone.value)
}
cellphone.addEventListener('change', fn2)
// 4. 验证的是验证码, 验证码的正则表达式 /^\d{6}$/
const yard = document.querySelector('#yard')
function fn3() {
    const regExp = /^\d{6}$/
    const msg = yard.nextElementSibling
    if (regExp.test(yard.value)) {
        msg.className = 'msg msgGreen'
        msg.innerHTML = `输入正确`
    } else {
        msg.className = 'msg msgRed'
        msg.innerHTML = `请输入6位有效数字`
    }
    return regExp.test(yard.value)
}
yard.addEventListener('change', fn3)
// 5. 验证的是密码框, 密码框的正则表达式 /^[a-zA-Z0-9-_]{6,20}$/
const passwordOne = document.querySelector('#passwordOne')
function fn4() {
    const regExp = /^[a-zA-Z0-9-_]{6,20}$/
    const msg = passwordOne.nextElementSibling
    if (regExp.test(passwordOne.value)) {
        msg.className = 'msg msgGreen'
        msg.innerHTML = `输入正确`
    } else {
        msg.className = 'msg msgRed'
        msg.innerHTML = `请输入6-20位有效字符`
    }
    return regExp.test(passwordOne.value)
}
passwordOne.addEventListener('change', fn4)

// 6. 确认密码的验证
const passwordTwo = document.querySelector('#passwordTwo')
function fn5() {
    const msg = passwordTwo.nextElementSibling
    if (passwordOne.value === passwordTwo.value) {
        msg.className = 'msg msgGreen'
        msg.innerHTML = `输入正确`
    } else {
        msg.className = 'msg msgRed'
        msg.innerHTML = `两次密码不一致`
    }
    return passwordOne.value === passwordTwo.value
}
passwordTwo.addEventListener('change', fn5)
// 7. 点击 我同意 按钮,
let age = 0
const cut = document.querySelector('#cut')
function fn6() {
    if (age === 0) {
        cut.innerHTML = `&#xe605;`
        age = 1
    } else if (age === 1) {
        cut.innerHTML = `&#xe731;`
        age = 0
    }
    return age
}
cut.addEventListener('click', fn6)
// 8. 提交的整体验证
const form = document.querySelector('form')
const user = document.querySelector('.user')
function an(a) {
    user.classList.remove('userNone')
    user.classList.add('userBlock')
    user.children[1].innerHTML = a
    setTimeout(function () {
        user.classList.remove('userBlock')
        user.classList.add('userNone')
    }, 1500)
}
form.addEventListener('submit', function (e) {
    e.preventDefault()
    if (!fn1()) {
        an('用户名输入有误')
        return
    } if (!fn2()) {
        an('手机号输入有误')
        return
    } if (!fn3()) {
        an('验证码输入有误')
        return
    } if (!fn4()) {
        an('密码输入有误')
        return
    } if (!fn5()) {
        an('第二次密码输入有误')
        return
    } if (age === 0) {
        an('请阅读并勾选用户协议')
        return
    } else {
        localStorage.setItem('names', uname.value)
        localStorage.setItem('password', passwordTwo.value)
        location.href = '../html/login.html'
    }
})

const shopCar = document.querySelector('#gouwuche')
shopCar.onclick = function () {
    location.href = './register.html'
}

input.addEventListener('click', function () {
    location.href = './register.html'
})